.#{$ns}Switch {
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: $Switch-width;
    height: $Switch-height;
    overflow: hidden;
    border-radius: px2rem(30px);
    background-color: $Switch-onActive-bgColor;
    margin: 0;
    vertical-align: middle;
    text-align: left;

    &.is-disabled {
        background-color: $Switch-onDisabled-bgColor;
    }

    i {
        &:before {
            content: "OFF";
            color: $Switch-valueColor;
            text-indent: ($Switch-width / 2) - px2rem(2px);
            text-transform: uppercase;
            font-size: $fontSizeSm;
            line-height: $Switch-height;
            font-style: normal;

            position: absolute;
            top: px2rem(-1px);
            bottom: px2rem(-1px);
            left: px2rem(-1px);
            right: px2rem(-1px);
            background-color: $Switch-bgColor;
            border: px2rem(1px) solid $Switch-borderColor;
            border-radius: px2rem(30px);
            transition: all 0.2s;
        }

        &:after {
            content: "";
            position: absolute;
            background-color: $white;
            width: $Switch-height - px2rem(2px);
            top: px2rem(1px);
            bottom: px2rem(1px);
            left: px2rem(1px);
            border-radius: 50%;
            // box-shadow: px2rem(1px) px2rem(1px) px2rem(3px) rgba(0, 0, 0, 0.25);
            transition: margin-left 0.3s;
        }
    }

    input {
        position: absolute;
        opacity: 0;

        &:disabled {
            & + i {
                &:before {
                    color: $Switch-onDisabled-color;
                    background-color: $Switch-onDisabled-bgColor;
                }

                &:after {
                    color: $Switch-onDisabled-color;
                }
            }
        }

        &:checked {
            & + i {
                &:before {
                    left: 100%;
                    border-width: 0;
                }

                &:after {
                    margin-left: $Switch-width - $Switch-height;

                    content: "On";
                    color: $white;
                    text-indent: px2rem(-20px); // todo
                    text-transform: uppercase;
                    font-size: $fontSizeSm;
                    font-weight: normal;
                    font-style: normal;
                    line-height: $Switch-height;
                }
            }
        }
    }
}

.#{$ns}Switch-option {
    vertical-align: middle;
    margin-left: $Switch-gap;

    &:first-child {
        margin-left: 0;
        margin-right: $Switch-gap;
    }

    &:empty {
        display: none;
    }
}

.#{$ns}SwitchControl {
    padding-top: ($Form-input-height - $Switch-height) / 2;

    &.is-inline {
        display: inline-block;
    }
}
